<template>
  <div id="kcDetail" class="sceneDetail">
    <div style="margin-bottom: 20px;" class="sceneStep">
      <template>
        <Steps :current="currentIndex" direction="vertical" class="step-group">
          <Step
            title="赛前设置"
            @click.native="exchangeStatus(0)"
            :class="{ curStep: competeStatus != 2 }"
            :icon="competeStatus != 2 ? 'ios-refresh-circle' : ''"
            content="提供赛前题目、竞赛选手的管理"
          ></Step>
          <Step
            title="赛后归档"
            @click.native="exchangeStatus(1)"
            :class="{ curStep: competeStatus == 2 }"
            :icon="competeStatus == 2 ? 'ios-refresh-circle' : ''"
            content="提供赛后竞赛选手成绩的管理和统计"
          ></Step>
        </Steps>
      </template>
      <div class="countdown" v-if="competeStatus != 2">
        <span v-if="competeStatus == 0">开始</span
        ><span v-if="competeStatus == 1">结束</span>倒计时：<b>
          <span>{{ time.h }}</span
          >:<span>{{ time.m }}</span
          >:<span>{{ time.s }}</span></b
        >
      </div>
      <div class="btn-group">
        <div class="flex">
          <Poptip
            confirm
            title="为确保可视化展示效果，建议使用chrome浏览器查看大屏。"
            @on-ok="showVisualization()"
            transfer
            word-wrap
            width="250"
          >
            <Button type="primary">
              <img src="../../../assets/scene/dis-screen.png" />可视化展示
            </Button>
          </Poptip>
          <!--<Dropdown>
            <Button type="primary">
              	可视化展示
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem @click.native="showVisualization()">知识赛</DropdownItem>
            </DropdownMenu>
          </Dropdown>-->
          <!--<Button type="primary" @click="showKnowLedgeCompetModel" v-if="competeStatus == 2">
	          	<img src="../../../assets/scene/start-scene.png" alt=""/>重新开始比赛</Button>-->
          <Poptip
            confirm
            title="确定要开始比赛？"
            @on-ok="changeCompetitionStatus('start')"
            transfer
            word-wrap
          >
            <Button type="primary" :ghost="disabledStart" :disabled="disabledStart">
              <img src="../../../assets/scene/dis-start-scene.png" alt="" v-if="disabledStart" />
              <img src="../../../assets/scene/start-scene.png" alt="" v-else />开始比赛</Button
            >
          </Poptip>
          <Poptip
            confirm
            title="确定要结束比赛？"
            @on-ok="changeCompetitionStatus('end')"
            transfer
            word-wrap
          >
            <Button type="primary" :ghost="disabledStop" :disabled="disabledStop">
              <img src="../../../assets/scene/dis-stop-scene.png" alt="" v-if="disabledStop" />
              <img src="../../../assets/scene/stop-scene.png" alt="" v-else />结束比赛</Button
            >
          </Poptip>
          <Button type="primary" v-if="competeStatus === '2'" @click="gotoReportPage">
            <img src="../../../assets/scene/btn-report.png" />报告</Button
          >
        </div>
        <div style="width:316px;">
          <span style="color:#ff9900;font-size:14px">
            <Icon type="ios-information-circle-outline" />
            开始比赛前请先配置竞赛选手和题目，如果已经配置完成，开始按钮不可点，请点击 </span
          ><a @click="validateStart" style="font-size: 14px;">校验</a>
        </div>
      </div>
    </div>
    <knowledge-pre-manage v-if="currentIndex === 0 && competeDetail.id" ref="preCompet">
    </knowledge-pre-manage>
    <knowledge-end-manage
      v-if="currentIndex === 1 && competeDetail.id"
    ></knowledge-end-manage>
    <knowledge-model ref="knowledgeModels" @getList="getDrillDetail(true)"></knowledge-model>
  </div>
</template>

<script>
import knowledgeEndManage from './knowledgeEndManage'
import knowledgePreManage from './knowledgePreManage'
import knowledgeModel from './knowledgeModel'
import { changeCompetitionSta, getCompetitionDetail } from '@/api/competition'
import usally from '@/mixin/usally'
import encryption from '@/libs/encryption.js'
import { sendToSence } from '@/api/boardcast_new.js'
import { getSenceUserList } from '@/api/knowledgeCompet'
import timer from '@/mixin/timer'
import commonFun from '../mixin.js' //一些公共方法(获取比赛人员和比赛题目等)，用来判断是否可以计算积分，开始比赛等等
export default {
  name: 'knowledgeDetail',
  components: {
    knowledgePreManage,
    knowledgeEndManage,
    knowledgeModel
  },
  mixins: [usally, timer, commonFun],
  provide() {
    return {
      detailParent: this
    }
  },
  data: function() {
    let September = sessionStorage.getItem('November')
    September = JSON.parse(encryption.SelfUseDecrypt(September))
    return {
      USER_ID: September.userId,
      isRootDesigner: September.isRootDesigner,
      prePage: parseInt(this.$route.query.page),
      competeDetail: {
        id:this.$route.query.id,
        name:this.$route.query.name
      }, //竞赛详情
      competeStatus: '0', //竞赛状态
      currentIndex: 0
    }
  },
  computed: {
    notOwnCompetition() {
      return this.USER_ID !== this.competeDetail.createUserId
    },
    disabledStart() {
      return this.competeStatus !== '0' || !this.hasUser || !this.hasQues || this.notOwnCompetition
    },
    disabledStop() {
      return this.competeStatus !== '1' || this.notOwnCompetition
    }
  },
  watch: {},
  mounted() {
    this.getDrillDetail(true)
    this.$store.commit('addBreadItem', { name: this.$route.query.name })
    this.validateStart(false)
  },
  beforeDestroy() {
    clearTimeout(this.timeout)
  },
  methods: {
    //获取竞赛状态
    getDrillDetail(needServerTime) {
      getCompetitionDetail(this.$route.query.id).then((data) => {
        if (data.code == 1) {
          let contest = data.attribute.data
          this.competeStatus = contest.activityStatus
          if (this.competeStatus == '1') {
            if (needServerTime) {
              if (this.timeout) {
                clearTimeout(this.timeout)
              }
              this.getServeTime(new Date(contest.endDate).getTime())
            }
          } else if (this.competeStatus == '0') {
            if (needServerTime) {
              if (this.timeout) {
                clearTimeout(this.timeout)
              }
              this.getServeTime(new Date(contest.startDate).getTime())
            }
          } else {
            this.currentIndex = 1
            if (needServerTime) {
              if (this.timeout) {
                clearTimeout(this.timeout)
              }
              this.getServeTime(new Date(contest.endDate).getTime())
            }
          }
          this.competeDetail = contest
        }
      })
    },
    gotoReportPage() {
      const { href } = this.$router.resolve({
        name: 'kcReport',
        query: {
          id: this.competeDetail.id,
          type: 3
        }
      })
      window.open(href, '_blank')
    },
    exchangeStatus(step) {
      if (step === 1 && this.competeStatus !== '2') {
        return
      }
      this.currentIndex = step
    },
    //修改竞赛状态
    changeCompetitionStatus(state) {
      let statusTxt = state === 'start' ? '开始' : '结束',
        statusVal = state === 'start' ? '1' : '2',
        params = { state }
      changeCompetitionSta(this.competeDetail.id, params).then((data) => {
        if (data.code == 1) {
          this.competeStatus = statusVal
          state === 'end' && this.exchangeStatus(1)
          this.$Message.info(`比赛${statusTxt}成功`)
        } else {
          this.$Message.warning(data.message)
        }
      })
    },
    // 跳转大屏
    showVisualization() {
      let routeData = this.$router.resolve({
        path: '/knowledgeCompe',
        query: {
          name: this.competeDetail.name,
          id: this.competeDetail.id,
          status: this.competeDetail.status,
          sTime: this.competeDetail.startTime,
          eTime: this.competeDetail.endTime
        }
      })
      window.open(routeData.href, '_blank')
    },
    showKnowLedgeCompetModel() {
      this.$refs.knowledgeModels.openModel(this.competeDetail, true)
    }
  }
}
</script>
<style scoped src="../../../view/drill_compete/detail.css"></style>
